<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <h1>{{name+123|qqq(1,2,3,4,5,6,7)|qqq|www}}</h1> -->
        <h1>{{name}}</h1>
        <!-- <h2>{{name.split('').reverse().join('')}}</h2>
        <h2>{{fn()}}</h2> -->
        <h1>{{name2}}</h1>
        {{typeof age}}
        <input type="text" v-model.number='age'>
        <input type="text" v-model='name'>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    Vue.filter('qqq',function(val){
      console.log(arguments)
      return 'qqqq' + val + 'qqq'
    })
    Vue.filter('www',function(val){
      console.log(arguments)
      return 'www' + val + 'www'
    })
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            age:10
        },
        filters:{
          qqq(val){
            return '自己的qqqq'+val
          }
        },
        methods: {
          fn(){
            console.log('fn....')
            return this.name.split('').reverse().join('')
          }
        },
        computed: {
          // 计算属性对应函数是否执行 主要是看 对应观察者的 dirty属性
          // 该属性是true时，那么会让对应函数执行 ，获取新值， 怎么就变成true了
          //       当依赖改变时 会触发 观察者的 update方法

          // false时， 那么会直接获取上次的计算结果，怎么就变成false了
          //       获取新值之后 观察者中的 evaluate会把变成false




          //name2:function(){}
          // name2(){
          //   console.log('computed....')
          //   // name 就是name2的一个依赖了
          //   // 依赖  只是要是在当前这个函数体内同步编写的变量 都是当前计算属性的依赖
          //   // 只有依赖发生改变的时候当前的这个计算属性才会重新执行
          //   setTimeout(() => {
          //     console.log(this.age)
          //   }, 10);
          //   return this.name.split('').reverse().join('')
          // }
          name2:{
            get(){
              console.log('get')
              return this.name.split('').reverse().join('')
            },
            set(val){
              console.log(val)
              setTimeout(() => {
                this.name = (val+'').split('').reverse().join('')
              }, 1000);
            }
          }
        },
    });
</script>